<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />

	<view class="container m-30">
		<view class="flex user-info">
			<up-avatar size="122rpx" round fit="cover" :src="imgUrl + info.photo" />
			<view class="flex flex-col justify-around info">
				<view class="nickname flex items-center">
					<view class="text">{{ info.nickname }}</view>
					<view class="level" v-if="info.level_name">{{ info.level_name }}</view>
				</view>
				<view class="flex items-center">
					<view class="text">ID：{{ info.code }}</view>
				</view>
				<view class="flex items-center">
					<view class="text">激活时间：{{ info.active_time }}</view>
				</view>
			</view>
		</view>

		<view class="work flex items-center">
			<view class="right flex-1 flex-col">
				<view v-show="isNull">
					<view class="item">
						<view class="flex user-info vacancy">虚位以待</view>
					</view>

					<view class="item">
						<view class="flex user-info vacancy">虚位以待</view>
					</view>
				</view>

				<view class="item" v-for="(item, index) in area" v-show="!isNull">
					<view class="flex user-info" v-if="info[item] != ''" @click="switchUser(info[item])">
						<up-avatar size="122rpx" round fit="cover" :src="imgUrl + info[item]?.photo" />
						<view class="flex flex-col justify-around info">
							<view class="nickname flex items-center">
								<view class="text">{{ info[item]?.nickname }}</view>
								<view class="level" v-if="info[item]?.level_name">{{ info[item]?.level_name }}</view>
							</view>
							<view class="flex items-center">
								<view class="text">ID：{{ info[item]?.code }}</view>
							</view>
							<view class="flex items-center">
								<view class="text">激活时间：{{ info[item]?.active_time }}</view>
							</view>
						</view>
					</view>
					<view class="flex user-info vacancy" v-else>虚位以待</view>
				</view>
			</view>
		</view>
	</view>

	<view class="btn-container flex items-center justify-center">
		<view class="btn border-btn" @click="backUp" v-if="!info.is_top">返回上层</view>
		<view class="btn theme-btn" @click="backTop" v-if="!info.is_top">返回顶层</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, imgUrl, goUrl, goBack, hint } from '../../service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();

	const info = ref({});
	const isNull = ref(true);
	const area = ref(['left', 'right']);
	const id = ref('');
	const title = ref('');

	onLoad((e) => {
		title.value = e.title;
	});

	async function getMyNodeList() {
		let res = await port('getMyNodeList', { id: id.value });
		info.value = res.data;

		area.value.map((v) => {
			info.value[v] = res[v];
		});
		isNull.value = false;
	}

	function switchUser(item) {
		id.value = item.id;

		getMyNodeList();
	}

	function backUp() {
		id.value = info.value.up_id;
		getMyNodeList();
	}

	function backTop() {
		id.value = '';
		getMyNodeList();
	}

	onShow(() => {
		getMyNodeList();
	});
</script>

<style scoped lang="scss">
	::v-deep page {
		background-color: #fff;
	}

	.btn-container {
		position: fixed;
		bottom: 70rpx;
		width: calc(100% - 60rpx);
		margin: 0 30rpx;
		gap: 30rpx;
		> view {
			width: 50%;
			border-radius: 44rpx;
			padding: 20rpx 0;
		}
		.border-btn {
			padding: 16rpx 0;
		}
	}

	.account {
		// margin-top: 20rpx;
		background-color: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		.account-box {
			// margin-top: 44rpx;
			.item {
				position: relative;
				.title {
					height: 35rpx;
					line-height: 35rpx;
					.text {
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						margin-right: 15rpx;
					}
				}
				.balance {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					margin-top: 22rpx;
				}
				.dollar::before {
					content: '$';
				}
			}

			.item:nth-child(2)::before {
				content: '';
				position: absolute;
				left: -10rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 1rpx;
				height: 48rpx;
				background-color: #eeeeee;
			}

			.item:nth-child(2)::after {
				content: '';
				position: absolute;
				right: -10rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 1rpx;
				height: 48rpx;
				background-color: #eeeeee;
			}
		}
	}

	.work {
		position: relative;

		.vacancy {
			height: 120.9rpx;
			align-items: center;
			justify-content: center;
			color: #666666;
			font-size: 24rpx;
		}

		.right {
			.item {
				margin: 52rpx 0 50rpx 92rpx;
				border-radius: 4rpx;
				border: 1px solid $theme-color;
				position: relative;
				.user-info {
					background: none;
					padding: 34rpx 24rpx;
					.text {
						color: #666666;
					}
					.nickname {
						.text {
							color: #000000;
						}
					}
				}
			}
			.item::before {
				content: '';
				display: block;
				width: 53rpx;
				height: 1rpx;
				background: $theme-color;
				position: absolute;
				top: 50%;
				transform: translateX(-100%);
			}

			.item:last-child::before {
				content: '';
				display: block;
				width: 1rpx;
				height: 392rpx;
				background: $theme-color;
				position: absolute;
				left: -54rpx;
				bottom: 0;
				transform: translateY(-100%);
			}

			.item:last-child::after {
				content: '';
				display: block;
				width: 53rpx;
				height: 1rpx;
				background: $theme-color;
				position: absolute;
				top: 50%;
				transform: translateX(-100%);
			}
		}
	}
	.user-info {
		background: $theme-bg-btn-color;
		border-radius: 16rpx;
		padding: 39rpx 28rpx;
		.info {
			margin-left: 26rpx;
			.nickname {
				.text {
					font-weight: bold;
					font-size: 30rpx;
					color: #ffffff;
				}
				.level {
					background: #ac7bfd;
					border-radius: 4rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					padding: 5rpx 11rpx;
					margin-left: 12rpx;
				}
			}

			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}
</style>
